<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vuejs-全选</title>
	</head>
	<style type="text/css">
		* {padding: 0px;margin: 0px;}
		a {color: #333;text-decoration: none;}
	</style>
	<script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
	<body>
		<label>
			<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" id="all" value=""  />
		    <span>全选</span>
	    </label>
		<div v-for="(index, item) in goodsList">
			<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow">
				<input type="checkbox" :value="index" v-model="selectArr" /> 商品名称:
				<span v-html="item.name"></span> | 价格:
				<span v-html="item.price"></span>
			</a>
		</div>
		<label>
			<input type="checkbox" name="all" v-on:click="chooseAll" v-model="selectArr.length==goodsList.length" />
  			<span>全选</span>
		</label>
	</body>
	<script type="text/javascript">
		var vue = new Vue({
			el: "body",
			data: {
				goodsList: [
					{name: "山本汉方1",price: "19.00"},
					{name: "山本汉方2",price: "19.00"},
					{name: "山本汉方3",price: "19.00"},
					{name: "山本汉方4",price: "19.00"},
					{name: "山本汉方5",price: "19.00"}
				],
				selectArr: []
			},
			ready: function() {},
			methods: {
				chooseAll: function(event) {
					var _this = this;
					_this.selectArr = [];
					if(event.currentTarget.checked) {
						_this.goodsList.forEach(function(item, index) {
							_this.selectArr.push(index);
						});
					}
					console.log(_this.selectArr);
				}
			}
		});
	</script>

</html>